<template>
  <div class="info">
    <!-- 精品歌单banner -->
    <div class="Header"
         @click="goSongList(HightInfo.tags[0])"
         v-if="HightInfo.coverImgUrl">
      <img v-lazy="HightInfo.coverImgUrl"
           class="background">
      <img class="R-imgse"
           v-lazy="HightInfo.coverImgUrl"
           alt="">
      <div class="H-main">
        <p>
          <svg class="icon "
               aria-hidden="true">
            <use xlink:href="#icon-jingpin"></use>
          </svg>
          精品歌单
        </p>
        <span>{{ HightInfo.name }}</span>
      </div>
    </div>
    <!-- 导航栏 -->
    <div class="nav">
      <button @click="drawer = !drawer"
              class="biaoqian">{{tagBtn}}<i class="el-icon-arrow-right"
           style="margin-left:5px"></i></button>
      <div class="allcat">
        <span v-for="(item,index) in navTats"
              :key="item.id"
              :class="{Active:tabIndex===index}"
              @click="changeTats(index,item.name)">{{ item.name}}</span>
      </div>
      <!-- 弹出层 -->
      <div class="drawer"
           v-show="drawer">
        <div class="D-nav">全部歌单</div>
        <div class="title-list"
             v-for="(item,index) in AllCat"
             :key="index">
          <div class="title">
            <template v-if="index===0">
              <svg class="icon "
                   aria-hidden="true">
                <use xlink:href="#icon-xitong"></use>
              </svg><span>语种</span>
            </template>
            <template v-if="index===1">
              <svg class="icon "
                   aria-hidden="true">
                <use xlink:href="#icon-jianpan"></use>
              </svg><span>风格</span>
            </template>
            <template v-if="index===2">
              <svg class="icon "
                   aria-hidden="true">
                <use xlink:href="#icon-kafei"></use>
              </svg><span>场景</span>
            </template>
            <template v-if="index===3">
              <svg class="icon "
                   aria-hidden="true">
                <use xlink:href="#icon-smile"></use>
              </svg><span>情感</span>
            </template>
            <template v-if="index===4">
              <svg class="icon "
                   aria-hidden="true">
                <use xlink:href="#icon-fengge"></use>
              </svg><span>主题</span>
            </template>
          </div>
          <ul>
            <li v-for="cat in item"
                :key="cat.name"><span class="no-btn"
                    @click="changeCats(cat.name)"
                    :class="{isActive:cat.isActive}">{{ cat.name }}</span></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="main">
      <ul>
        <li v-for="(item) in playList"
            :key="item.id">
          <router-link :to="{path:'/homeitem/:id',query:{id:item.id}}">
            <img v-lazy="item.coverImgUrl"
                 :key="item.coverImgUrl">
            <div class="m-num"
                 v-if="item.playCount!==0">
              <svg class="icon "
                   aria-hidden="true">
                <use xlink:href="#icon-bofang"></use>
              </svg>
              <span class="num">{{ changeNum(item.playCount) }}</span>
            </div>
            <p class="p-name">{{ item.name }}</p>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="flex_center"
         style="width: 100%">
      <el-pagination background
                     @current-change="changePageInfo"
                     :page-size="50"
                     :current-page="pageInfo.currentPage"
                     layout="prev, pager, next"
                     :total="pageInfo.total">
      </el-pagination>
    </div>
    <div class="buttom"
         style="height: 40px;"></div>
  </div>
</template>
<script>
import {
  getHighquality,
  getAllCat,
  getHotCat,
  getPlayListByCat
} from "@/api/RankList"
export default {
  data () {
    return {
      HightInfo: {},//默认显示数据
      AllCat: [],//歌单分类
      playList: [],//精品歌单
      tagBtn: '华语',
      drawer: false,
      navTats: {},//导航栏分类
      tabIndex: 0,
      queryInfo: {
        limit: 50,
        order: 'hot',
        cat: '华语',
        offset: 0
      },
      pageInfo: {
        total: 0,
        currentPage: 1
      },
    }
  },
  created () {
    this.getAllCat()
    this.getHotCat()
    this.getPlayList()
  },
  methods: {
    /* 获取热门歌单分类10 */
    async getHotCat () {
      let res = await getHotCat()
      if (res.code !== 200) return
      this.navTats = res.tags
    },
    /* 获取所有歌单分类 */
    async getAllCat () {
      let res = await getAllCat()
      if (res.code === 200) {
        this.AllCat = []
        res.sub.forEach((item) => {
          item.isActive = false
          /* 使当前标签激活 */
          if (item.name == this.tagBtn) {
            item.isActive = true
          }
        })
        for (let i = 0; i < 5; i++) {
          this.AllCat.push(
            Object.freeze(res.sub.filter((item) => {
              return item.category === i
            }))
          )
        }
      }
    },
    // 分页的回调
    changePageInfo (val) {
      this.pageInfo.currentPage = val
      this.queryInfo.offset = (val - 1) * 50
      document.querySelector('.main').scrollTop = 0
      this.getPlayList()
    },
    // 根据分类获取歌单
    async getPlayList () {
      this.getHightInfo(this.queryInfo.cat)
      let res = await getPlayListByCat(this.queryInfo)
      if (res.code !== 200) return
      this.playList = Object.freeze(res.playlists)
      this.pageInfo.total = res.total
    },
    // 获取歌单第一页默认显示的数据
    async getHightInfo (cat) {
      let res = await getHighquality(cat, 1)
      if (res.code !== 200) return
      if (res.playlists.length === 0) {
        this.HightInfo = {}
        return
      }
      this.HightInfo = Object.freeze(res.playlists[0])
    },
    // 点击分类跳转
    changeTats (index, name) {
      this.tabIndex = index
      this.queryInfo.cat = name
      this.tagBtn = name
      this.drawer = false
      // 点击分类时，让offset回到第一页
      this.queryInfo.offset = 0
      this.pageInfo.currentPage = 0
      this.getPlayList()
    },
    // 改变tagBtn
    changeCats (name) {
      this.tagBtn = name
      this.drawer = false
      this.getAllCat()
      this.queryInfo.cat = name
      this.getPlayList()
    },
    changeNum (num) {
      if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + '亿'
      } else if (num > 10000) {
        return (num / 10000).toFixed(1) + '万'
      } else {
        return num
      }
    },
    // 去精品歌单
    goSongList (cat) {
      this.$router.push({ path: '/highquality/:cat', query: { cat: cat } })
    }
  },
  // watch: {
  //   deep: true,
  //   queryInfo () {
  //     this.getPlayListByCat()
  //   }
  // }
}
</script>

<style scoped lang="less">
.Header {
  width: 1160px;
  height: 190px;
  border-radius: 10px;
  margin: 10px auto;
  display: flex;
  overflow: hidden;
  position: relative;
  .background {
    position: absolute;
    top: -400px;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    width: 100%;
    filter: blur(45px);
  }
  .R-imgse {
    overflow: hidden;
    border-radius: 5px;
    margin: 15px;
    width: 160px;
    height: 160px;
    z-index: 2;
    cursor: pointer;
  }

  .H-main {
    z-index: 2;
    p {
      display: inline-block;
      border: 1px solid #e7aa5a;
      color: #e7aa5a;
      margin: 10px;
      font-size: 13px;
      padding: 6px 15px;
      margin-top: 45px;
      padding-left: 35px;
      border-radius: 15px;
      position: relative;
      cursor: pointer;
      .icon {
        position: absolute;
        top: 5px;
        left: 15px;
      }
    }
    span {
      display: block;
      color: #fff;
      margin-top: 20px;
      font-size: 16px;
      cursor: pointer;
    }
  }
}
.nav {
  width: 1160px;
  margin: 15px auto;
  position: relative;
  .biaoqian {
    float: left;
    width: 100px;
    line-height: 30px;
    text-align: center;
    height: 30px;
    border-radius: 15px;
    border: 1px solid rgb(216, 211, 211);
    color: #000;
    background-color: #fff;
  }
  .allcat {
    display: block;
    float: right;
    span {
      font-size: 13px;
      width: auto;
      height: 30px;
      border-radius: 15px;
      padding: 5px 10px;
      cursor: pointer;
      color: #968d8d;
      &:hover {
        color: #000;
      }
      &.Active {
        background: rgb(252, 243, 243);
        color: red;
      }
    }
  }
  .drawer {
    z-index: 2;
    background-color: #fff;
    width: 600px;
    top: 40px;
    position: absolute;
    border-radius: 4px;
    box-shadow: 0 1px 4px #dddddd;
    .D-nav {
      height: 60px;
      padding: 18px;
      color: rgb(15, 14, 14);
      border-bottom: 1px solid rgb(227, 222, 222);
    }
    .title-list {
      display: flex;
      line-height: 26px;
      margin: 20px 0px 20px 20px;
      .title {
        float: left;
        width: 100px;
        height: 30px;
        line-height: 30px;
        margin-top: 20px;
        color: #cccccc;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        width: 760px;
        li {
          width: 90px;
          height: 26px;
          font-size: 13px;
          margin: 10px;
          margin-right: 0;
          .no-btn {
            cursor: pointer;
            padding: 4px 5px;
            justify-content: center;
            &.isActive {
              background: rgb(252, 243, 243);
              color: #ec4141;
              border-radius: 10px;
            }
            &:hover {
              color: #ec4141;
            }
          }
        }
      }
    }
  }
}
.main {
  display: flex;
  width: 1160px;
  margin: 10px auto;
  ul {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    li {
      margin: 5px 20px 10px 0;
      position: relative;
      img {
        width: 210px;
        height: 210px;
        border-radius: 10px;
      }
      .m-num {
        position: absolute;
        top: 2px;
        right: 6px;
        height: 21px;

        .icon {
          position: absolute;
          top: 0;
          left: -20px;
        }
        .num {
          color: #fff;
          font-size: 12px;
          height: 21px;
          text-align: center;
          line-height: 21px;
        }
      }
      .p-name {
        width: 210px;
        font-size: 14px;
      }
    }
  }
}
.flex_center {
  margin-bottom: 20px;
  /deep/.el-pagination {
    margin-top: 30px;
    text-align: center;
    &.is-background .el-pager li:not(.disabled).active {
      background-color: #ec4141;
    }
    &.is-background .btn-next,
    &.is-background .btn-prev,
    &.is-background .el-pager li {
      margin: 0 5px;
      background-color: #f4f4f5;
      color: #606266;
      min-width: 30px;
      border-radius: 6px;
      &:hover {
        color: #ec4141;
      }
    }
  }
}
</style>